<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <App></App>
    <Other></Other>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /* 
    定义组件的简写方法: 
      直接写配置对象{template, data, methods}
    全局注册组件:
      Vue.component(组件名, 组件配置对象/函数)
    组件嵌套:
      一个组件的模板可以包含n个其它组件
      被包含的组件就是当前组件的子组件
      当前组件就是它们的父组件
    */

    // 定义组件: 简写方式 => 内部会根据这个配置定义组件函数
    const Other = { 
      name: 'Other',
      template: '<p>Other组件</p>'
    }

    // 注册全局组件
    Vue.component('Other', Other)

    // 定义一个vue组件
    const App = Vue.extend({
      name: 'APP', // vue调试工具显示组件标签名
      template: `
        <div>
          <h2 @click="update">count: {{count}}</h2>
          <span>abc</span>  
          <Other></Other>
        </div>
      `,
      data () { // 必须是函数
        return {
          count: 1
        }
      },
      methods: {
        update () {
          this.count++
        }
      },
      // components: {
      //   Other
      // }
    })

    
    console.log(Other)

    console.log(App)  // 组件构造函数

    new Vue({
      el: "#test",
      data: {

      },
      // 局部注册组件, 只能写当前模板中
      components: {
        App,
        // Other
      }
    })
  </script>
</body>
</html>